<template>
  <div id="app" style="height: 100%">
    <el-container class="index-con">
      <el-aside width="auto" style="background: #334157">
        <el-menu router :default-active="$route.path" class="el-menu-vertical-demo" :collapse="isCollapse"
                 background-color="#334157" text-color="#fff" active-text-color="#ffd04b">
          <div class="logobox">
            <img class="logoimg" height="50"><img src="../assets/logo.png" height="50" width="50"/>
          </div>
          <el-submenu index="1" >
            <template slot="title">
              <span slot="title">导航一</span>
            </template>
            <el-menu-item index="/demo1">选项1</el-menu-item>
            <el-menu-item index="/demo2">选项2</el-menu-item>
            <el-menu-item index="/demo3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="2" >
            <template slot="title">
              <span slot="title">导航二</span>
            </template>
            <el-menu-item index="/demo1">选项1</el-menu-item>
            <el-menu-item index="/demo2">选项2</el-menu-item>
            <el-menu-item index="/demo3">选项3</el-menu-item>
          </el-submenu>
          <el-submenu index="3" >
            <template slot="title">
              <span slot="title">导航三</span>
            </template>
            <el-menu-item index="/demo1">选项1</el-menu-item>
            <el-menu-item index="/demo2">选项2</el-menu-item>
            <el-menu-item index="/demo3">选项3</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container >
        <el-header style="background: #334157" text-color="#fff" active-text-color="#ffd04b">
          <div id="breadcrumb">
            <el-button @click="menuClick" v-bind:icon="menuIcon" style="background: #334157"></el-button>
          </div>
          <div id="userinfo">
            <el-dropdown @command="handleCommand">
              <span>{{ username }}</span>
              <span class="el-dropdown-link">
             <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>设置</el-dropdown-item>
                <el-dropdown-item command="log" divided>退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
export default {
  data () {
    return {
      username: '',
      isCollapse: false,
      menuIcon: 'el-icon-s-fold'
    }
  },
  beforeMount () {
    this.username = sessionStorage.getItem('user')
  },
  methods: {
    menuClick: function () {
      this.isCollapse = !this.isCollapse
      this.menuIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
    handleCommand (log) {
      if (log === 'log') {
        console.log(sessionStorage.getItem('user'))
        this.$router.push({path: '/'})
      }
    }
  }
}
</script>
<style scoped>

.index-con {
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.aside {
  width: 64px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
}
.asideshow {
  width: 240px !important;
  height: 100%;
  background-color: #334157;
  margin: 0px;
}
.index-header,
.index-main {
  padding: 0px;
  border-left: 2px solid #333;
}
.el-header {
  background-color: #fff;
  color: #333;
  line-height: 60px;
  text-align: right;
  font-size: 12px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: row;
}

.el-aside {
  color: #333;
  border: 1px solid #eee;
}

.el-main {
  border: 1px solid #eee;
}

#breadcrumb {

  flex-direction: row;
  width: 90%;
  justify-content: flex-start;
  align-items: center;
  text-align: left;
}

#userinfo {
  display: flex;
  flex-direction: row;
  width: 10%;
  justify-content: flex-end;
  text-align: right;
  align-items: center;
}
</style>
